<template>
  <el-table :data="userList" border stripe style="width: 100%" v-show="!isLoading">
    <el-table-column prop="id" label="ID" align="center" v-if="false" />
    <el-table-column prop="username" label="用户名" align="center" />
    <el-table-column prop="realname" label="真实姓名" align="center" />
    <el-table-column prop="email" label="邮箱" align="center" />
    <el-table-column prop="phone" label="手机号" align="center" />
    <el-table-column prop="status" label="状态" align="center">
      <template #default="{ row }">
        <span :class="row.status ? 'status-enabled' : 'status-disabled'">
          {{ row.status ? '启用' : '禁用' }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" align="center" />
    <el-table-column label="操作" fixed="right" align="center" min-width="100">
      <template #default="{ row }">
        <el-button size="small" @click="emitEdit(row)">编辑</el-button>
        <el-button size="small" :type="row.status ? 'danger' : 'success'" @click="emitToggleStatus(row)">
          {{ row.status ? '禁用' : '启用' }}
        </el-button>
        <el-button size="small" type="danger" @click="emitDelete(row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
const props = defineProps({
  userList: {
    type: Array,
    required: true,
    default: () => []
  },
  isLoading: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['edit', 'toggle-status', 'delete'])

const emitEdit = (user) => {
  emit('edit', user)
}

const emitToggleStatus = (user) => {
  emit('toggle-status', user)
}

const emitDelete = (id) => {
  emit('delete', id)
}
</script>

<style scoped>
.status-enabled {
  color: #67c23a;
  font-weight: 500;
}

.status-disabled {
  color: #f56c6c;
  font-weight: 500;
}
</style>